<!-- 创建时间: 2020年12月26日 星期六 00:26 -->
<template>
    <div class="viewPreview_container">
        <center>
            <div v-show="questionsList == undefined || questionsList.length == 0"
                 style="color: rgb(191 179 179);font-size: 20px;margin-top: 50px;">
                暂无试题信息
            </div>
        </center>
        <center style="margin-top:10px;"
                v-if="questionsList != undefined && questionsList.length != 0">
            <span class="title">{{ $store.getters.getAddQuestions.className }}
                {{ $store.getters.getAddQuestions.coursesName }} 课程考试</span>
        </center>
        <el-backtop>
            <i class="el-icon-caret-top"
               title="返回顶部"></i>
        </el-backtop>
        <el-card class="box-card"
                 v-show="questionsList != undefined && questionsList.length != 0">
            <span>单选题 {{ radioCount }} 道,共 {{ radioScore }} 分</span>
            <span>多选题 {{ checkboxCount }} 道,共 {{ checkboxScore }} 分</span>
            <span>总分: {{ radioScore + checkboxScore }}</span>
            <el-popover style="position: fixed; right: 20px;"
                        placement="left"
                        width="400"
                        trigger="hover">
                <el-button circle
                           v-for="(item, index) in questionsList"
                           :key="index"
                           class="myCircle"
                           :style="'background:' + item.answerColor"
                           @click="quickNavigation(item.id)">{{ item.id }}</el-button>
                <el-button slot="reference">快速导航</el-button>
            </el-popover>
        </el-card>

        <el-card class="box-card"
                 v-for="(item, i) in questionsList"
                 :key="i"
                 :id="item.id">
            <!-- 题型 -->
            <div slot="header"
                 class="clearfix">
                <span v-if="item.type == 'radio'"><b>【{{ "选择题-" + (i + 1) }}】</b></span>
                <span v-if="item.type == 'checkbox'"><b>【{{ "多选题-" + (i + 1) }}】</b></span>
                <span>{{ item.questionName }} （ {{ item.score }}分 ）</span>
            </div>
            <!-- 题目循环列表 -->
            <div class="optionList">
                <span v-for="(ite, j) in item.optionList"
                      :key="j">
                    {{ letterList[j] }}. {{ ite }}
                </span>
                <span class="optionList_rightOption"
                      style="color:#67C23A;">
                    {{"【正确答案:" + item.rightOptionLetter + "】"}}
                </span>
                <span class="optionList_rightOption"
                      v-if="$store.getters.getUserType == 'student'"
                      :style="'color:' + item.answerColor">
                    【你的答案:{{ item.studentAnswer }}】
                </span>
            </div>
        </el-card>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import $ from "jquery";

export default {
    //import引入的组件需要注入到对象中才能使用
    components: {},
    data () {
        //这里存放数据
        return {
            questionsList: [], // 试题列表
            letterList: ["A", "B", "C", "D", "E", "F", "H", "I", "J", "K"], // 字第列表
            radioCount: 0, //单选题数量
            radioScore: 0, //单选题数分和
            checkboxCount: 0, //多选题数量
            checkboxScore: 0, //多选题分数和
            answerList: [], //学生作答记录
        };
    },
    //监听属性 类似于data概念
    computed: {},
    //监控data中的数据变化
    watch: {},
    //方法集合
    methods: {
        // 计算题型数、分值、计算总分
        clacQuestionType () {
            let list = this.questionsList;
            for (let i = 0; i < list.length; i++) {
                if (list[i].type == "radio") {
                    this.radioCount++;
                    this.radioScore += list[i].score;
                } else if (list[i].type == "checkbox") {
                    this.checkboxCount++;
                    this.checkboxScore += list[i].score;
                }
            }
        },
        // 快速导航定位题目位置
        quickNavigation (id) {
            $("#" + id)[0].scrollIntoView({
                behavior: "smooth"
            });
        },
        // 匹配出试题库中所题型答案对应的选项ABCD
        clacQuestionRightOption () {
            for (let i = 0; i < this.questionsList.length; i++) {
                switch (this.questionsList[i]['type']) {
                    case "radio":
                        this.clacQuestionRightOption_radio(this.questionsList[i]);
                        break;
                    case "checkbox":
                        this.clacQuestionRightOption_checkbox(this.questionsList[i]);
                        break;
                    default:
                        break;
                }
            }
        },
        // 匹配出试题库中单选的正确答案选项
        clacQuestionRightOption_radio (questionsList) {
            let rightOptionLetter = "未选";
            if (questionsList.rightOption != "") {
                rightOptionLetter = this.letterList[
                    questionsList.optionList.indexOf(
                        questionsList.rightOption
                    )
                ];
            }
            this.$set(
                questionsList,
                "rightOptionLetter",
                rightOptionLetter
            );
        },
        // 匹配出试题库中单选的正确答案选项
        clacQuestionRightOption_checkbox (questionsList) {
            // 匹配出正确选项的字母
            let rightOptionLetter = "";
            for (
                let i = 0; i < questionsList.rightOption.length &&
                questionsList.rightOption != ""; i++
            ) {
                rightOptionLetter += this.letterList[
                    questionsList.optionList.indexOf(
                        questionsList.rightOption[i]
                    )
                ]
            }
            rightOptionLetter == "" ? "未选" : rightOptionLetter;
            this.$set(
                questionsList,
                "rightOptionLetter",
                rightOptionLetter
            );
        },

        /**
         * *********************以下学生试题分析--只有从学生端品进入才会执行*********************
         */
        // 获取学生作答试题
        getAnswerList () {
            if (this.$store.getters.getUserType != "student") return;
            let studentNumber = this.$store.getters.getUserNumber;
            let classNumber = studentNumber.substr(0, 7);
            let questionBank =
                classNumber +
                "-" +
                this.$store.getters.getAddQuestions.questionBank;
            this.$http
                .post("getAnswerLibrary", {
                    classNumber,
                    questionBank,
                    studentNumber,
                })
                .then((res) => {
                    if (res.body != "") {
                        res.body[0].rightOption = JSON.parse(
                            res.body[0].rightOption
                        );
                        this.answerList = res.body;
                        this.calcAnswerList();
                    } else {
                        this.$message.warning("数据信息获取失败");
                        this.$router.push(this.$route.query.backPath);
                    }
                });
        },

        /**
         * [{…}]
            0:
                rightOption: Array(2)
                    0: (2) [1, "-2"]
                    1: (2) [2, Array(4)]
                studentName: "王彦钧"
                studentNumber: "2006831514"
         */
        // 计算学生作答试题 - 工厂
        calcAnswerList () {
            let answerList = this.answerList[0].rightOption;
            for (let i = 0; i < answerList.length; i++) {
                switch (this.questionsList[answerList[i][0] - 1]["type"]) {
                    case "radio":
                        this.calcAnswerList_radio(answerList[i]);
                        break;
                    case "checkbox":
                        this.calcAnswerList_checkbox(answerList[i]);
                        break;
                    default:
                        break;
                }
            }
        },
        // 计算学生作答试题 - 工厂单选计算
        calcAnswerList_radio (answerList) {
            if (
                this.questionsList[answerList[0] - 1]["rightOption"] ==
                answerList[1]
            ) {
                this.$set(
                    this.questionsList[answerList[0] - 1],
                    "answerColor",
                    "#67C23A"
                );
            } else {
                this.$set(
                    this.questionsList[answerList[0] - 1],
                    "answerColor",
                    "#F56C6C"
                );
            }

            let studentAnswer = this.letterList[
                this.questionsList[answerList[0] - 1].optionList.indexOf(
                    answerList[1]
                )
            ];

            this.$set(
                this.questionsList[answerList[0] - 1],
                "studentAnswer",
                studentAnswer
            );
        },
        // 计算学生作答试题 - 工厂多选计算
        calcAnswerList_checkbox (answerList) {
            answerList[1] = answerList[1].split("&");
            // 判断本题对错
            let flag = true;
            if (
                answerList[1].length ==
                this.questionsList[answerList[0] - 1].rightOption.length
            ) {
                for (let i = 0; i < answerList[1].length && flag; i++) {
                    for (
                        let j = 0; j <
                        this.questionsList[answerList[0] - 1].rightOption
                            .length; j++
                    ) {
                        if (
                            answerList[1][i] ==
                            this.questionsList[answerList[0] - 1].rightOption[j]
                        ) {
                            flag = true;
                            break;
                        }
                        flag = false;
                    }
                }
            } else {
                flag = false;
            }

            // 匹配出学生选择的字母，不管对与错
            let studentAnswer = "";
            for (let i = 0; i < answerList[1].length; i++) {
                for (
                    let j = 0; j < this.questionsList[answerList[0] - 1].optionList.length; j++
                ) {
                    if (
                        answerList[1][i] ==
                        this.questionsList[answerList[0] - 1].optionList[j]
                    ) {
                        studentAnswer += this.letterList[j];
                    }
                }
            }

            this.$set(
                this.questionsList[answerList[0] - 1],
                "studentAnswer",
                studentAnswer
            );
            if (flag) {
                this.$set(
                    this.questionsList[answerList[0] - 1],
                    "answerColor",
                    "#67C23A"
                );
            } else {
                this.$set(
                    this.questionsList[answerList[0] - 1],
                    "answerColor",
                    "#F56C6C"
                );
            }
        },
    },

    beforeDestroy () {
        this.$store.commit("setQuestionsList", "");
        this.$store.commit("setAddQuestions", "");
    },
    //生命周期 - 创建完成（可以访问当前this实例）
    created () {
        // 获取上一个页面传递过来的试题库列表
        this.questionsList = this.$store.getters.getQuestionsList;
        // 匹配出试题库列表中正确答案的字母
        this.clacQuestionRightOption();
        // 计算出试题库列表中所有的题量和总分
        this.clacQuestionType();
        // 获取学生作答记录，并计算相差信息---只有学生端进入才会执行
        this.getAnswerList();
    },
    //生命周期 - 挂载完成（可以访问DOM元素）
    mounted () { },
    //当data中定义的数据有变化时就会加载updated方法
    updated () { },
};
</script>

<style lang="scss" scoped>
//@import url(); 引入公共css类
.viewPreview_container {
    z-index: 0;
    position: relative;
    width: 100%;
    height: 100%;

    .title {
        font-size: 20px;
    }

    .box-card,
    .info {
        margin: 40px 15px;

        .clearfix {
            display: flex;
            flex-direction: column;
        }

        .optionList {
            span {
                padding: 15px 0;
                display: block;
                border-bottom: 1px solid lightgrey;
            }

            span.optionList_rightOption {
                border-bottom: 0px;
                display: inline-block;
            }
        }
    }
}

.myCircle {
    width: 40px !important;
    height: 40px !important;
    margin: 10px !important;

    &:hover {
        color: white;
    }
}
</style>
